<template>
  <div :class="$style.container">
    <h4>支付方式</h4>
    <ul>
      <li 
        v-for="(item,idx) in arr" 
        :key="'pay_method'+idx" 
        :class="(isActive === idx || hoverNo === idx) ? $style.active: ''"
        @click.stop="handleItemClick(idx)"
        @mouseover="hoverNo=idx">
        <i 
          :class="[$style.icon, 'iconfont',item.class]" 
          :style="{color:item.color}"
        />
        <span>{{ item.name }}</span>
        <div v-if="(isActive ===idx) || (hoverNo === idx)" >
          <div :class="$style.tip"/>
          <i :class="[$style.dui,'iconfont','icon-duihao']"/>
        </div>
        
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: 0,
      hoverNo: null,
      arr: [
        {
          class: 'icon-zhifubao1',
          name: '支付宝',
          color: '#00aaf2'
        },
        {
          class: 'icon-weixinzhifu',
          name: '微信支付',
          color: '#00cb00'
        }
      ]
    }
  },
  methods: {
    handleItemClick(idx) {
      this.isActive = idx
      this.$emit('payChannel', idx === 0 ? 'zfbPay' : 'wxPay')
    }
  }
}
</script>

<style lang='scss' module>
.container {
  margin: 0px 0px 30px;
  border-top: 1px solid #d9dde1;
  border-bottom: 1px solid #d9dde1;
  padding: 20px 0px;
  box-sizing: border-box;
  h4 {
    height: 46px;
    line-height: 30px;
    font-size: 16px;
    color: #07111b;
  }
  ul {
    padding: 20px 10px;
    &:after {
      display: block;
      content: ' ';
      overflow: hidden;
      clear: both;
    }
    li {
      position: relative;
      float: left;
      margin-right: 10px;
      width: 196px;
      height: 90px;
      line-height: 90px;
      text-align: center;
      background: #f3f5f7;
      border-radius: 5px;
      cursor: pointer;
      box-sizing: border-box;
      .icon {
        display: inline-block;
        font-size: 40px;
        vertical-align: -5px;
      }
      span {
        font-size: 30px;
        color: #5e5e5e;
      }
      .tip {
        position: absolute;
        right: 0px;
        bottom: 0px;
        border-bottom: 20px solid red;
        border-left: 20px solid transparent;
      }
      .dui {
        position: absolute;
        right: -4px;
        bottom: 31px;
        display: inline-block;
        height: 20px;
        width: 20px;
        font-size: 14px;
        color: #fff;
      }
    }
    .active {
      border: 2px solid red;
    }
  }
}
</style>
